<template>
	<view class="pull_up_btn" :class="{down:isUp}"  @touchstart.stop="start" @touchend.stop="end">
		<image src="../../../assets/images/home/up.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: 'pull-up',
		props: {
			isUp:{
				type:Boolean,
				default:false,
			}
		},
		data() {
			return {
				startData:{clientX:'',clientY:''},
			};
		},
		methods: {
			start(e){
				//console.log(e)
				this.startData.clientX=e.changedTouches[0].clientX;
				this.startData.clientY=e.changedTouches[0].clientY;
			},
			end(e){
				const subX=e.changedTouches[0].clientX-this.startData.clientX;
				const subY=e.changedTouches[0].clientY - this.startData.clientY;
				if(subY>50 || subY<-50){
					if(subY>50){
						this.$emit('update:isUp',false)
					}else if(subY<-50){
						this.$emit('update:isUp',true)
					}
				}else{
					let flag = this.isUp
					flag = !flag
					this.$emit('update:isUp',flag)
				}
				// else{
				// 	if(subX>100){
				// 		console.log('右滑')
				// 	}else if(subX<-100){
				// 		console.log('左滑')
				// 	}else{
				// 		console.log('无效')
				// 	}
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
.pull_up_btn{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	height:60rpx;
	width: 100%;
	color: #428ee4;
	font-size: 28rpx;
	text-align: center;
	z-index: 1000;
	
	image{
		width: 48rpx;
		height: 12rpx;
		transition: all .5s;
	}
	&.down{
		image{
			transform: rotateX(180deg);
		}
	}
	&::after{
		content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    background: white;
		    height: 35rpx;
		    z-index: -1;	
	}
}
</style>
